<template>
  <ve-ring
    ref="sexAnalysis"
    :data="chartData"
    :height="'400px'"
    :settings="chartSettings"
    :judge-width="true"
    :extend="extendData"
    resizeable/>
</template>
<script>
import veRing from 'v-charts/lib/ring.common';
import { isNumber } from '@/utils/tools';
import { moneyFilter, numberTextFormat } from '@/filters/number';
export default {
  name: 'SexAnalysis',
  components: { veRing },
  props: {
    originData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    const that = this;
    return {
      chartData: null,
      chartSettings: {
        label: {
          show: false
        }
      },
      extendData: {
        legend: { // 图例
          orient: 'vertical',
          right: '4%',
          y: 'center',
          icon: 'circle',
          itemHeight: 8,
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                width: 40,
                color: '#999999',
                fontFamily: 'PingFangSC-Regular,PingFang SC'
              },
              b: {
                fontSize: 14,
                color: '#333333',
                fontFamily: 'PingFangSC-Medium,PingFang SC'
              }
            }
          },
          formatter: function(name, data) {
            const currentData = that.chartData.rows.find(i => i.Name === name);
            let currentDataNum = currentData.Num;
            if (!isNumber(currentData.Num)) {
              currentDataNum = currentData.Num || '';
            } else {
              currentDataNum = moneyFilter(numberTextFormat(currentData.Num, 1), false);
            }
            return `{a|${name}}{b|${currentDataNum}}`;
          }
        },
        series: {
          center: ['32%', '50%']
        },
        color: ['#406EFF', '#FD8546', '#F9C142', '#7254F6', '#FF6573', '#31CC9C']
      }
    };
  },
  created() {
    setTimeout(() => {
      this.handelData();
    }, 0);
  },
  methods: {
    handelData() {
      const columns = ['Name', 'Num'];
      let rows = this.originData;
      rows = rows.filter(i => i.Name !== '总体');
      this.chartData = {
        columns,
        rows
      };
    },
    changeSize() {
      this.$nextTick(() => {
        this.$refs['sexAnalysis'].echarts.resize();
      });
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
